<template>
    <section class="game-process-intro">
        <h1>流程介绍</h1>
        <main>
            <ul>
                <li class="game-phase">
                    <h2>游戏开始</h2>
                    <main>
                        <p>初始化游戏数值：</p>
                        <p>天命点(1)、发展点(1)、动员点(1)、资源点(8)、军事点（1攻1防）、凶吉卡(5吉5凶)</p>
                        <p>若此时有生效的「诸侯卡」，则按照其改动初始化数值。</p>
                    </main>
                </li>
                <li class="game-phase">
                    <h2>游戏过程</h2>
                    <main>
                        <section>
                            <p>每轮各诸侯按照规定次序行动，行动次数不得大于天命点数。</p>
                            <p>行动类别有：</p>
                            <p>发展、资源、动员、军事、战争、外交、天命。</p>
                        </section>
                        <section>
                            <h3>固定事件</h3>
                            <section>
                                <p>蛮夷入侵：每进行四轮，抽取一张「蛮夷卡」，然后众诸侯抽取「凶吉卡」：</p>
                                <p>凶，该诸侯受到蛮夷影响；</p>
                                <p>吉，该诸侯不受到蛮夷影响。</p>
                            </section>
                        </section>
                        <section>
                            <h3>战争说明</h3>
                            <p>胜利条件：耗尽敌方主城防御/敌方献城投降。</p>
                            <p>胜利奖励（四选一）： </p>
                            <p>1.夺取对方「诸侯之长」/「祥瑞赐福」等加成天命的状态；</p>
                            <p>2.令对方成为我方附庸；</p>
                            <p>3.夺取对方一个附庸；</p>
                            <p>4.夺取对方一个天命点。</p>
                        </section>
                    </main>
                </li>
                <li class="game-phase">
                    <h2>游戏结束</h2>
                    <main>
                        <section>
                            <p>胜利分为：</p>
                            <p>帝道胜利、王道胜利和霸道胜利三种。</p>
                        </section>
                        <section>
                            <h3>帝道胜利</h3>
                            <p>处于一个永久会盟中，且有「贤者居之」誓言，且我方天命点最高。</p>
                        </section>
                        <section>
                            <h3>王道胜利</h3>
                            <p>处于一个永久会盟中，且有「恪守礼乐」誓言，且我方天命点最高。</p>
                        </section>
                        <section>
                            <h3>霸道胜利</h3>
                            <p>所有其他诸侯均为你的附庸/场上不存在诸侯。</p>
                        </section>
                    </main>
                </li>
            </ul>
        </main>
    </section>
</template>

<script lang="ts" setup>
</script>

<style scoped>
.game-process-intro {
    background-color: rgb(0, 0, 0, 0.5);
    padding: 0.5vh 0.5vw;
}

.game-phase {
    background-color: gray;
    border-radius: 0.5vw;
    padding: 3px;
    margin: 0.3vh 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-phase h2 {
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.game-phase main {
    width: 80%;
    padding-left: 1vw;
}

h3,
h4 {
    margin-top: 3px;
}

h3::before {
    content: "·";
}
</style>